<!DOCTYPE html>
<html lang="zh">


<head>
  <!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-WBG5X5B');</script>
  <!-- End Google Tag Manager -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
  <link rel="stylesheet" type="text/css" href="assets/css/fontawesome.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/rall.main.min.css">
  <link rel="stylesheet" href="assets/css/elementindex.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/rall.responsive.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/icon.css">

  <script>
      // var _hmt = _hmt || [];
      // (function () {
      //   var hm = document.createElement("script");
      //   hm.src = "https://hm.baidu.com/hm.js?b1015b38bba06b4f282d520fd305cf34";
      //   var s = document.getElementsByTagName("script")[0];
      //   s.parentNode.insertBefore(hm, s);
      // })();
  </script>


</head>

<body data-page="scroll">
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBG5X5B" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- HEADER -->
  <header>
    <div class="header">
      <div class="container">
        <div class="flex align-items-c justify-content-sb" style="height: 60px;">
          <div class="header-logo maopc" id="logo_pc">
          </div>
          <div id="serachInput" class="maomodel-search " style="width: 100%;
        padding: 0 1rem;display: none;">
            <div class="maocontent1">
              <div class="rigthBtn" id="serachBox">
                <!-- 搜索框 -->
              </div>
            </div>
          </div>
          <nav id="menuBox" class="header-menu">
            <div class="header-menu-icon">
              <span class="easing"></span>
              <span class="easing"></span>
              <span class="easing"></span>
            </div>
            <div class="header-menu-view">
              <ul class="lg_flex" id="menu">

              </ul>
            </div>
          </nav>

          <div class="header-logo maopc_xl" id="logo_ph">

          </div>


          <div class="search">
            <div><img alt="Rall" id="search-gif" src="../assets/images/search.png"></div>
          </div>

        </div>
      </div>
    </div>
  </header>


  <!-- MAIN -->
  <main>
    <div class="scroll-content " data-page="scroll-content" id="scroll-content">
      <div class="boxNUM maomodel-main">
        <div class="container moduleItem">
          <div class="row">
            <div class="col-12 col-lg-8">
              <div class="si-left">
                <section class="maomodel-last-posts maomodel-mcontent">
                  <div class="row" id="listBox">


                  </div>
                  <div id="pagination" class="container paginationBox">
                    <el-pagination @current-change="currentChange" :current-page="page" :page-size="pageSize"
                      layout="prev, pager, next" :total="total">
                    </el-pagination>
                  </div>
                </section>

              </div>
            </div>


            <!-- 右侧独立 -->
            <div class="col-12 col-lg-4 maopc" style="position: relative">
              <div class="si-right">
                <section class="maomodel-slide-post mao-mb-small" id="Popular">

                </section>

                <div class="maomodel-slide-email">
                  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
                  <script>
                    hbspt.forms.create({
                      region: "na1",
                      portalId: "23162827",
                      formId: "0d83b6d9-54b4-4b2b-b355-aaead74b2626"
                    });
                  </script>
                  <div class="hbspt-form">
                    <!-- <form id="myForm3" action="">
                      <div class="hs-richtext hs-main-font-element">
                        <h2 id="sub_tips"></h2>
                      </div>

                      <div class="hs_email hs-email hs-fieldtype-text field hs-form-field hs_email2">
                        <div class="input">
                          <input id="sub_placeholder" value="" autocomplete="email" class="hs-input" type="email"
                            placeholder="" name="email">
                        </div>
                      </div>

                      <div class="hs_submit hs-submit">
                        <input id="sub_btn_txt" type="submit" class="hs-button primary large" value="">
                      </div>
                    </form> -->
                  </div>
                </div>

                <div class="maomodel-slide-search mao-mt mao-mb">
                  <h2 class="mao-small-title mao-mb-small" id="searchH4"></h2>

                  <div class="ji-search">
                    <input id="serachBtn" onkeyup="checkForm(event, this)" type="text" name="s" placeholder="">
                    <button onclick='checkButton()' type="submit" class="mao-btn-fang">
                      <img alt="Rall" id="search-gif" src="assets/images/search1.png">
                    </button>
                  </div>
                </div>
              </div>
            </div>




          </div>
        </div>



      </div>

      <!-- FOOTER -->
      <footer>
        <section class="maomodel-email mao-mb container">
          <div class="maocontent">
            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
            <script>
              hbspt.forms.create({
                region: "na1",
                portalId: "23162827",
                formId: "0d83b6d9-54b4-4b2b-b355-aaead74b2626"
              });
            </script>
            <!-- <div class="hbspt-form">
              <form id="myForm">
                <div class="hs-richtext hs-main-font-element" id="subscribeH2">

                </div>

                <div class="hs_email hs-email hs-fieldtype-text field hs-form-field">
                  <div class="input" id="subscribeInput">

                  </div>
                </div>

                <div class="hs_submit hs-submit" id="subscribeBtn">
                </div>
              </form>
            </div> -->
          </div>
        </section>
        <div class="container moduleItem">
          <div class="row">
            <div class="col-12 col-lg-4">
              <div class="maomodel-footer-desc" id="txt0">

              </div>
            </div>
            <div class="col-12 col-lg-4 maopc">
              <div class="maomodel-footer-link mao-mt-small">
                <div class="maomodel-footer-link mao-mt-small">
                  <h2 class="mao-small-title mao-mb-small" id="Label5"></h2>
                  <ul id="navBox">

                  </ul>
                </div>
              </div>
            </div>

            <div class="col-12 col-lg-4">
              <div class="maomodel-footer-contact mao-mt-small">
                <h2 class="mao-small-title mao-mb-small" id="Label1"></h2>
                <div id="txt1">
                </div>
                <p>
                  <a target="_blank" class="mao-btn-fang mao-mb-small" id="Label2"></a>
                </p>
                <div class="si-social maomobile" id="linkBox2">

                </div>
              </div>
            </div>

            <div class="col-12">
              <div class="maomodel-footer-info">
                <div class="si-info" id="txt23">
                </div>
                <div class="si-social maopc" id="linkBox">

                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </main>

  <div id="cursor" class="">
    <div class="cursor-plus"><i class="fas fa-plus"></i></div>
  </div>




  <!-- JS -->
  <script src="assets/js/vue.min.js"></script>
  <script src="assets/js/jquery-1.12.4.min.js"></script>
  <script src="assets/js/rall.libraries.js"></script>
  <script src="assets/js/rall.main.js"></script>
  <script src="assets/js/vlt-plugins.min.js"></script>
  <script src="assets/js/vlt-helpers.js"></script>
  <script src="assets/js/vlt-controllers.min.js"></script>
  <script src="../assets/js/utils.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script type="text/javascript" src="pinyin_dict_withtone.js"></script>
  <script type="text/javascript" src="pinyinUtil.js"></script>

  <script>
    //获取列表最受欢迎数据
    $.ajax({
      url: `${URL_}/api/getMostPopularData`, //请求的url地址
      dataType: "json", //返回格式为json
      async: false, //请求是否异步，默认为异步，这也是ajax重要特性
      data: {
        page: 1,
        pageSize: 3
      }, //参数值
      type: "get", //请求方式
      headers: {
        'Authorization': Authorization
      },
      success: function (res) {
        //请求成功时处理
        let Popular_Html = `
        <h4 class="mao-small-title mao-mb-small">${PopularName}</h4>
        <div class="si-post">
          ${(() => {
            let tags = ``
            res.data.list.map(res_item => {
              tags += `
              <div class="ji-post">
                <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" target="_blank" class="s-img-box">
                  <img class="s-img" src="${res_item.cover_img}" alt="${res_item.title}">
                  <div class="ji-mask">${More}</div>
                </a>
                <div class="s-info">
                  <a target="_blank" href="business.html?plac_id=${res_item.plac_id}&type=1" class="si-cat mao-btn mao-mb-small">${res_item.cate.name}</a>
                  <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" class="si-desc mao-small-title mao-line-3">${res_item.title}</a>
                </div>
              </div>
                        `
            })
            return tags
          })()
          }
          
        </div>
        `
        $("#Popular").append(Popular_Html);
        document.getElementById('searchH4').innerHTML = searchH4
        document.getElementById('serachBtn').placeholder = searchPlaceholder

        // document.getElementById('sub_btn_txt').value = subscribe.btn_txt
        // document.getElementById('sub_placeholder').placeholder = subscribe.placeholder
        // document.getElementById('sub_tips').innerHTML = subscribe.tips

      },
    });
    

    new Vue({
      el: "#pagination",
      data() {
        return {
          newList: [],
          page: 1,
          pageSize: 7,
          total: 0,
          column: ''
        }
      },
      created() {
        this.getList()
      },
      methods: {
        containsChinese(str) {
          return /[\u4e00-\u9fff]/.test(str);
        },
        getList() {
          //获取列表数据
          $.ajax({
            url: `${URL_}/api/getListData`, //请求的url地址
            dataType: "json", //返回格式为json
            async: false, //请求是否异步，默认为异步，这也是ajax重要特性
            data: {
              page: this.page,
              pageSize: this.pageSize,
              plac_id: getQueryId('plac_id'),
              keywords: '',
              type: getQueryId('type'),
              plas_id: getQueryId('plas_id'),
              plat_id: getQueryId('plat_id'),
              a_id: getQueryId('a_id')
            }, //参数值
            type: "get", //请求方式
            headers: {
              'Authorization': Authorization
            },
            success: (res) => {
              //请求成功时处理
              console.log(res.data);
              let data = res.data

              this.total = data.total
              let listBox = ``
              if (getQueryId('type') == '6') {

                // let title = ''
                // console.log(this.containsChinese(data.title[0].txt),data.title[0]);
                // if (this.containsChinese(data.title[0].txt)) {
                //   title = pinyinUtil.getPinyin(data.title[0].txt, '', false, false)
                // } else {
                //   title = data.title[0].txt.toLowerCase().replace(/ /g, '-')
                // }
                // window.location.hash = `/${title}`;

                listBox = `
          <div class="ji-author-meta ji-author-page mao-mb"> <img
              src="${data.title[0].avatar}">
            <div class="s-a-box">
              <h1><a href="javascript:" 
                  class="mao-big-title mao-mb-small">${data.title[0].txt}</a></h1>
              <div class="mao-aux-word">${data.title[0].describe}</div>
            </div>
          </div>

          ${(() => {
                    let tags = ``
                    data.list.map(res_item => {
                      tags += `
                <div class="ji-author-posts author_list">
                  <div class="ji-author-post mao-bg mao-padding">
                    <a target="_blank" href="details.html?id=${res_item.cont.id}" class="s-img-box">
                      <div class="j-img"
                        style="background-image: url('${res_item.cover_img}')">
                      </div>
                      <div class="j-mask">${More}</div>
                    </a>
                    <div class="s-meta">
                      <a target="_blank" href="business.html?plac_id=${res_item.cate.id}&type=1" class="si-cat mao-btn mao-mb-small">${res_item.cate.name}</a>
                      <a target="_blank" href="details.html?id=${res_item.cont.id}" class="mao-small-title mao-line-3 mao-mb-small">${res_item.title}</a>
                      <div class="j-time">${res_item.publish_date}</div>
                    </div>
                  </div>
                </div>
                        `
                    })
                    return tags
                  })()
                  }
          `
              } else {
                if (!data.list.length) return

                // let title = ''
                // console.log(this.containsChinese(data.list[0].cate.name),data.list[0]);
                // if (this.containsChinese(data.list[0].cate.name)) {
                //   title = pinyinUtil.getPinyin(data.list[0].cate.name, '', false, false)
                // } else {
                //   title = data.list[0].cate.name.toLowerCase().replace(/ /g, '-')
                // }
                // window.location.hash = `/${title}`;

                let tag = ''
                if (getQueryId('type') == 4) {
                  tag = tagName + '：'
                }

                listBox = `
          <div class="col-12">
            <div class="maoheader maomodel-header mao-mb-small">
              <h1 class="mao-small-title">
                ${tag}${data.title[0].txt}
              </h1>
            </div>
          </div>

          ${(() => {
                    let tags = ``
                    data.list.map((res_item, res_index) => {
                      if (!res_index) {
                        tags += `
                  <div class="col-12 maopc">
                    <div class="maocontent mao-mb-small">
                      <div class="si-2">
                        <img  src="${res_item.cover_img}" class="si-bg"  alt="${res_item.title}">

                        <div class="si-bg-inner">
                          <a target="_blank" href="details.html?id=${res_item.cont.pla_id}"></a>
                          <div class="si-bg-c">
                            <a href="details.html?id=${res_item.cont.pla_id}" target="_blank" >
                              <h2 class="si-desc mao-small-title mao-line-2 mao-mb-small">${res_item.title}</h2>  
                            </a>
                            <div class="mao-avatar-box si-meta mao-aux-word mao-mb-small">
                              <a href="business.html?a_id=${res_item.author.id}&type=6" target="_blank" href="business.html?a_id=${res_item.author.id}&type=6">
                                <img src="${res_item.author.avatar}">
                                <span>${res_item.author.name}</span>
                              </a>
                              <span>${res_item.publish_date}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-lg-6 col-12 maopc_xl">
                    <div class="maocontentU">
                      <div class="si-img-box ">
                        <a target="_blank" href="details.html?id=${res_item.cont.pla_id}">
                          <img class="ji-img" src="${res_item.cover_img}" alt="${res_item.title}">
                          <div class="ji-mask">${More}</div>
                        </a>
                      </div>
                      <div class="si-content mao-bg ">
                        <div class="mao-small-title mao-line-3  ">
                          <a target="_blank" href="details.html?id=${res_item.cont.pla_id}">
                           ${res_item.title}
                          </a>
                        </div>
                        <div class="mao-avatar-box si-meta mao-aux-word mao-mb-small">
                          <a target="_blank" href="business.html?a_id=${res_item.author.id}&type=6" class="mao-avatar">
                            <img src="${res_item.author.avatar}">
                            <span>${res_item.author.name}</span>
                          </a>
                          <span>${res_item.publish_date}</span>
                        </div>
                        <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" class="si-desc mao-word-second mao-line-2 maopc">${res_item.cont.content}</a>
                      </div>
                    </div>
                  </div>
                          `
                      } else {
                        tags += `
                  <div class="col-lg-6 col-12 ">
                    <div class="maocontentU">
                      <div class="si-img-box ">
                        <a target="_blank" href="details.html?id=${res_item.cont.pla_id}">
                          <img class="ji-img" src="${res_item.cover_img}" alt="">
                          <div class="ji-mask">${More}</div>
                        </a>
                      </div>
                      <div class="si-content mao-bg mao-line-3-box-btn">
                        <div >
                          <a target="_blank" href="details.html?id=${res_item.cont.pla_id}">
                           <h2 class="mao-small-title mao-line-3 mao-mb-small">${res_item.title}</h2>
                          </a>
                        </div>
                        <div class="mao-avatar-box si-meta mao-aux-word mao-mb-small">
                          <a target="_blank" href="business.html?a_id=${res_item.author.id}&type=6" class="mao-avatar">
                            <img src="${res_item.author.avatar}">
                            <span>${res_item.author.name}</span>
                          </a>
                          <span>${res_item.publish_date}</span>
                        </div>
                        <a target="_blank" href="details.html?id=${res_item.cont.pla_id}" class="si-desc mao-word-second mao-line-2 maopc">${res_item.cont.content}</a>
                      </div>
                    </div>
                  </div>
                  `
                      }
                    })
                    return tags
                  })()
                  }
          `
              }

              $('#listBox').empty();

              $("#listBox").prepend(listBox);

            },
          });

        },
        currentChange(page) {
          this.page = page

          this.getList()
        }
      }
    })

  </script>
  <style>

  </style>
  <!-- Start of HubSpot Embed Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/23162827.js"></script>
  <!-- End of HubSpot Embed Code -->
</body>

</html>